import React from 'react';
import { useEffect, useRef } from "react";
import { ArcGisMapServerImageryProvider, ImageryLayer, Viewer,Cartesian3,Math,GeographicTilingScheme } from 'cesium';
import 'cesium/Build/CesiumUnminified/Widgets/widgets.css' 


export default function CesiumMap (){
  const cesiumContainer = useRef(null)
  useEffect(() => {
      const viewer = new Viewer(cesiumContainer.current, {
          animation: false, // 是否显示动画控件
          baseLayerPicker: false, // 是否显示图层选择控件
          fullscreenButton: false, // 是否显示全屏按钮
          geocoder: false, // 是否显示地名查找控件
          homeButton: false, // 是否显示Home按钮
          infoBox: false, // 是否显示信息框
          sceneModePicker: true, // 是否显示3D/2D选择器
          selectionIndicator: false, // 是否显示选取指示器组件
          timeline: false, // 是否显示时间轴
          navigationHelpButton: false, // 是否显示帮助信息按钮
          navigationInstructionsInitiallyVisible: false, // 是否显示导航指示
      })
      // 去掉Logo标签
      viewer._cesiumWidget._creditContainer.style.display = "none"
      return () => {
          viewer.destroy()
      }
  }, [])

  return(
    <>
       <div ref={cesiumContainer} style={{ width: '100%', height: '100%' }}></div>
    </>
  )
}